<template>
  <div class="Head-container">
    <div class="head-contentBox">
      <!-- 左边 -->
      <div class="head-main-left">
        <!-- 设备监控 -->
        <router-link to="/home" class="device" @mouseover="DevicechangecolorRight" @mouseout="DevicechangecolorGray">
          <img v-if="$route.name == 'Home'" class="deviceImg" src="../../assets/head/icon-device-light.svg" alt="设备监控" />
          <img v-else class="deviceImg" :src=lightDeviceImg alt="设备监控" />
          <span :class="$route.name == 'Home' ? 'Activeselect' : 'noselect  deviceImgHover'"> 设备监控 </span>
        </router-link>
        <!-- 告警中心 -->
        <router-link to="/alarm" class="warnning" @mouseover="AlarmchangecolorRight" @mouseout="AlarmchangecolorGray">
          <img v-if="$route.name == 'Alarm'" class="warnningImg" src="../../assets/head/icon-alarm-light.svg" alt="告警中心" />
          <img v-else class="warnningImg" :src=lightAlarmImg alt="告警中心" />
          <span :class="$route.name == 'Alarm' ? 'Activeselect' : 'noselect  warnningImgHover'">告警中心</span>
        </router-link>
      </div>
      <!-- 中间 -->
      <div class="head-main-middle">
        <!-- logo -->
        <div class="logo">
          <img src="../../assets/example/logo3.svg" mode="scaleToFill" class="logo-img" />
        </div>
        <!-- title -->
        <div class="title">
          <p>北京先见科技</p>
          <p>智能视觉工厂物联系统</p>
        </div>
      </div>
      <!-- 右边 -->
      <div class="head-main-right">
        <!-- 时间 -->
        <div class="time">{{ formattedTime }}</div>
        <!-- 深色模式 -->
        <!-- <div class="mode"  @click="toggleTheme">
          <img class="modeImg" src="../Head/img/mode.png" alt="" />
          <p class="ziti">深色模式</p>
        </div> -->
        <!-- 系统管理 -->
        <div class="system" @click="SystemdialogVisible = true" @mouseover="changecolorRight" @mouseout="changecolorGray">
          <img class="systemImg" :src=lightSystemImg alt="" />
          <p :class="{'systemTitleHover':systemHover}">设备列表</p>
        </div>
        <!-- 头像-->
        <div class="avator" @click="UserinfoVisibleVisible = true">
          <img class="avatorImg" src="../../assets/head/userinfo.png" alt="用户信息" />
          <p class="userName">{{ UsreInfo?.UserName }}</p>
        </div>
        <!-- 全屏 -->
        <div class="screen" :plain="true" @keydown.esc="toggleFullScreen" @click="toggleFullScreen" @mouseover="changeIconLight" @mouseout="changeIconGray">
          <img v-show="screenImg" class="screenImg" :src=lightScreenImg alt="" />
          <div @mouseover="changeLight" @mouseout="changeGray" style="display:flex">
            <img v-show="!screenImg" class="screenImg" :src=lightexitScreenImg alt="" />
            <p class="titleActive">{{ screen }}</p>
          </div>
        </div>
        <!-- 退出登录 -->
        <div class="login" @click="LogOutVisibleVisible = true" @mouseover="changeloginLight" @mouseout="changeloginGray">
          <img class="loginImg" :src=lightloginImg alt="" />
          <p>退出</p>
        </div>
      </div>
    </div>
    <!-- 系统管理的提示框 -->
    <el-dialog title="设备与终端列表" v-model="SystemdialogVisible" :before-close="handleClose" width="1600px" top="5vh">
      <DeviceInfo></DeviceInfo>
    </el-dialog>
    <el-dialog title="用户中心" v-model="UserinfoVisibleVisible" width="1200px" top="5vh" :before-close="handleClose1" @close="handleClick">
      <UserInfodialog ref="child"></UserInfodialog>
    </el-dialog>
    <el-dialog title="退出登录" v-model="LogOutVisibleVisible" width="600px" top="30vh">
      <!-- <Logoutdialog  style="height: 360px;"></Logoutdialog> -->
      <div class="logOut-content">
        <div class="conttent">
          <img src="../../assets/head/info.svg" alt="">
          <span class="content">确定要退出当前账号吗？</span>
        </div>
        <div class="btn">
          <el-button class="btnStyle hoverstyle" @click="cancelUserStatus">取消</el-button>
          <el-button class="btnStyle btncolor" @click="logOutUserStatus">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, inject, watchEffect, computed } from "vue";
import UserInfodialog from "@/views/Dialog/userInfodialog.vue";
import DeviceInfo from "@/views/Dialog/deviceInfo.vue"

import lightSystem from "../../assets/head/systemList-right.svg"
import graySystem from "../../assets/head/systemList-gray.svg"
import lightAlarm from "../../assets/head/icon-alarm-light.svg"
import grayAlarm from "../../assets/head/icon-alarm-gray.svg"
import lightDevice from "../../assets/head/icon-device-light.svg"
import grayDevice from "../../assets/head/icon-device-gray.svg"
import lightfullScreen from "../../assets/head/fullScreenActive.svg"
import grayfullScreen from "../../assets/head/fullScreen.svg"
import lightexitScreen from "../../assets/head/exitScreenActive.svg"
import grayexitScreen from "../../assets/head/exitScreen.svg"
import lightlogin from "../../assets/head/logOuthover.svg"
import graylogin from "../../assets/head/logOut.svg"
import router from "@/router";

const SystemdialogVisible = ref(false);
const UserinfoVisibleVisible = ref(false);
const LogOutVisibleVisible = ref(false);
const theme = inject('theme');
const child = ref<any>(null)
const screenImg = ref(true)
const screen = ref("全屏")
const lightSystemImg = ref(graySystem)
const lightAlarmImg = ref(grayAlarm)
const lightDeviceImg = ref(grayDevice)
const lightScreenImg = ref(grayfullScreen)
const lightexitScreenImg = ref(grayexitScreen)
const lightloginImg = ref(graylogin)
const systemHover= ref(false)

const currentTime = ref(new Date());
const formattedTime = computed(() => {
  const year = currentTime.value.getFullYear();
  const month = String(currentTime.value.getMonth() + 1).padStart(2, '0');
  const day = String(currentTime.value.getDate()).padStart(2, '0');
  const hours = String(currentTime.value.getHours()).padStart(2, '0');
  const minutes = String(currentTime.value.getMinutes()).padStart(2, '0');
  const seconds = String(currentTime.value.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});
onMounted(() => {
  document.addEventListener('keydown', handleKeyPress);
})
setInterval(() => {
  currentTime.value = new Date();
}, 1000);

const handleKeyPress = (event: any) => {
  if (event.keyCode === 27) { // 27 表示 ESC 键的键码
    // 在这里执行退出全屏的逻辑
    screen.value = "全屏"
    screenImg.value = true
  }
}
// 点击全屏按钮的回调函数
const toggleFullScreen = (event: any) => {
  const elem: any = document.documentElement;

  if (!document.fullscreenElement) {//如果是全屏
    console.log(111);

    screen.value = "退出全屏"
    screenImg.value = false
    changeLight()
    changeGray()
    // lightScreenImg.value = grayexitScreen
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
      elem.msRequestFullscreen();
    }
  } else {
    screen.value = "全屏"
    screenImg.value = true
    if (document.exitFullscreen) {
      // lightScreenImg.value = grayfullScreen
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
  }
}


// 点击系统管理出现弹框
const handleClose = () => {
  SystemdialogVisible.value = false
}

const logOutUserStatus = () => {
  router.push({ path: "/login" });
  sessionStorage.clear()
}
const cancelUserStatus = () => {
  LogOutVisibleVisible.value = false
}

const handleClick = () => {
  child.value.childFun()


}
// const toggleTheme = () => {
//   theme.value = theme.value === 'light' ? 'dark' : 'light';
// };
//  从本地存储拿数据
const UserInfoJSON: any = localStorage.getItem("UserInfo");
const UsreInfo = JSON.parse(UserInfoJSON);// 转化为JSON.parse
// watchEffect(() => {
//   document.documentElement.classList.remove('light', 'dark');
//   document.documentElement.classList.add(theme.value);
// });

// 设备列表
const changecolorRight = () => {
  lightSystemImg.value = lightSystem
  systemHover.value=true
}
const changecolorGray = () => {
  lightSystemImg.value = graySystem
  systemHover.value=false
}

// 告警中心
const AlarmchangecolorRight = () => {
  lightAlarmImg.value = lightAlarm
}
const AlarmchangecolorGray = () => {
  lightAlarmImg.value = grayAlarm
}

// 设备监控
const DevicechangecolorRight = () => {
  lightDeviceImg.value = lightDevice
}
const DevicechangecolorGray = () => {
  lightDeviceImg.value = grayDevice
}

// 全屏
const changeIconLight = () => {
  lightScreenImg.value = lightfullScreen
}
const changeIconGray = () => {
  lightScreenImg.value = grayfullScreen
}

const changeLight = () => {
  lightexitScreenImg.value = lightexitScreen
}

const changeGray = () => {
  lightexitScreenImg.value = grayexitScreen
}

const changeloginLight = () => {
  lightloginImg.value = lightlogin
}

const changeloginGray = () => {
  lightloginImg.value = graylogin
}



</script>

<style scoped lang="less">
.light {
  background-color: #f0f0f0;
  color: black;
}

.dark {
  background-color: black;
  color: #f0f0f0;
}

/*清楚dialog本身的padding值*/
:deep(.el-dialog__body) {
  padding: 0;
  height: 100%;
}

:deep(.el-overlay-dialog) {
  overflow: visible
}

.Head-container {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  padding: 0px 42px;



  .head-contentBox {
    display: flex;
    height: 64px;
    justify-content: space-between;
    align-items: center;

    /* 左边：设备监控   告警中心*/
    .head-main-left {
      display: flex;
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: #595959;

      .device {
        display: flex;
        align-items: center;

        .deviceImg {
          margin-right: 10px;
        }

        .noselect {
          color: #595959;
        }

        .Activeselect {
          color: #f2994a;
        }

      }

      .device:hover .deviceImgHover {
        color: #f2994a;
      }

      .warnning {
        display: flex;
        margin-left: 40px;
        justify-content: center;
        align-items: center;

        .noselect {
          color: #595959;
        }

        .Activeselect {
          color: #f2994a;
        }

        .warnningImg {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }

      .warnning:hover .warnningImgHover {
        color: #f2994a;
      }

      .model {
        margin-left: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .iconModel {
          margin-left: 3px;
          padding-top: 7px;
        }
      }
    }

    /* 中间：标题   logo*/
    .head-main-middle {
      display: flex;
      align-items: center;

      .logo {
        margin-right: 9px;

        .logo-img {
          -webkit-user-drag: none;
        }
      }

      .title {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        color: #595959;
        opacity: 0.9;
        letter-spacing: 0.1px;
        /*浏览器中不会被选中*/
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    }

    /* 右边：*/
    .head-main-right {
      display: flex;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #595959;

      .time {
        width: 140px;
        height: 22px;
        font-family: "Source Han Sans CN";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #595959;
        margin: 0 12px;
      }

      /*深色模式*/
      .mode {
        display: flex;
        align-items: center;
        margin: 0 12px;
        cursor: pointer;

        .modeImg {
          width: 17.5px;
          height: 14.66px;
          margin-right: 5.25px;
        }

        .ziti {
          width: 56px;
          height: 22px;
          font-family: "Source Han Sans CN";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          color: #595959;
        }
      }

      /*系统管理*/
      .system {
        display: flex;
        margin: 0 12px;
        cursor: pointer;
        .systemImg {
          margin-right: 4px;
        } 
        .systemTitleHover {
        color: #f2994a;
      }
      }

     

      /*头像*/
      .avator {
        display: flex;
        margin: 0 12px;
        cursor: pointer;

        .avatorImg {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #f2994a;
          margin-right: 3.25px;
        }
      }

      .avator:hover .userName {
        color: #f2994a;
      }

      .screen {
        display: flex;
        margin: 0 0 0 12px;
        cursor: pointer;

        .screenImg {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }

      .screen:hover .titleActive {
        color: #f2994a;
      }

      .login {
        display: flex;
        margin: 0 12px;
        cursor: pointer;

        .loginImg {
          margin-right: 2px;
        }
      }

      .login:hover {
        color: #f2994a;
      }
    }
  }

  .logOut-content {
    width: 100%;
    height: 360px;

    .conttent {
      border-top: 1px solid #F2F2F2;
      border-bottom: 1px solid #F2F2F2;
      width: 100%;
      display: flex;
      height: 85%;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;

      .content {
        padding-left: 8px;
        letter-spacing: 1px;
      }
    }

    .btn {
      background: #FBFBFA;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: end;
      padding: 0 24px;

      .btnStyle {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        padding: 5px 20px;
        border-radius: 6px;
      }

      .hoverstyle:hover {
        columns: #5a9cf8;
        background: #eef5fe;
      }

      .btncolor {
        background: #F2994A;
        color: #FFF;
        box-shadow: 0 2px 4px #F2F2F2;
      }
    }
  }

  .logOut {
    background: #d24e4e;

    .logOut-container {
      height: 800px;

      .content {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn {
        width: 100%;
        height: 80px;
        background: #d21a1a;
      }
    }

  }

  :deep(.el-dialog) {
    border-radius: 5px;
  }

  :deep(.el-dialog__header) {
    background: #fbfbfa;
    margin-right: 0px;
    border-radius: 5px;
  }

  :deep(.el-dialog__title) {
    font-family: Source Han Sans CN;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: rgba(38, 38, 38, 1);

  }

  :deep(.el-icon svg) {
    color: #424242;
  }
}
</style>